<template>
  <div class="about">
      <!-- header -->
    <van-row>
        <van-col>
            <img class="icon" src="../assets/icon.png" />
        </van-col>
        <van-col>
            <van-search
            class="index_header_search"
            v-model="search_v"
            shape="round"
            placeholder="请输入搜索关键字"
            maxlength=50
            ></van-search>
        </van-col>
        <van-col>
            <div class="searchBtn">搜索</div>
        </van-col>
    </van-row>
    <div id="sidebar">
        <van-sidebar v-model="activeKey">
        <van-sidebar-item title="为你推荐" />
        <van-sidebar-item title="会员中心" />
        <van-sidebar-item title="新品上架" />
        <van-sidebar-item title="煲汤必备" />
        <van-sidebar-item title="叶菜类" />
        <van-sidebar-item title="番茄/茄果类" />
        <van-sidebar-item title="花菜/球茎类" />
        <van-sidebar-item title="葱姜蒜椒" />
        <van-sidebar-item title="土豆/根茎类" />
        <van-sidebar-item title="菌菇类" />
        <van-sidebar-item title="豆腐/豆制品" />
        <van-sidebar-item title="芽苗/豆类" />
</van-sidebar>
    </div>

<!-- 底边  下面的五个分类  可以改但是就是我们 还有就是要改五个 还有路由-->
    <van-tabbar v-model="dactive">
        <van-tabbar-item icon="home-o" name="home" to="">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" name="fenlei" to="/fenlei"> 分类</van-tabbar-item>
        <van-tabbar-item icon="orders-o" name="caipu" to="/caipu">菜谱</van-tabbar-item>
        <van-tabbar-item  icon="cart-o" name="gouwuche" to="/gouwuche">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" name="wode" to="/wode">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// import { Toast } from 'vant';

export default {
  data() {
    return {
      search_v: '',
      activeKey: 0,
      dactive:'fenlei'
    };
  },
  // methods: {
  //  goback(){
  //    this.$router.go(-1);
  //  },
  // },
};

</script>
<style scoped>
*{
    border: 0;
    margin: 0;
    padding: 0;
}
.icon{
    width: 30px;
    display: inline-block;
    margin: 14px 5px 5px 15px;
}
.index_header_search{
    width: 260px;
    margin: 15px 5px 5px 5px 5px;
}
.searchBtn{
    margin: 12px 5px 5px 5px;
    color: #f00;
    text-align: center;
    font-size: 20px;
    padding-left:4px;
    padding-right: 4px;
    line-height: 28px;
    border-radius: 5%;
    border: 1px solid #f00;

}
</style>